@using Bit.Bswup
@using Bit.BlazorUI
@using Boilerplate.Client.Core.Components

@* https://bitplatform.dev/bswup/overview *@

@inherits AppComponentBase

<style>
    #bit-bswup {
        top: 2px;
        left: 50%;
        display: none;
        position: fixed;
        z-index: 999999999;
        text-align: center;
        transform: translateX(-50%);
        font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    }

        #bit-bswup .bswup-container {
            width: 3rem;
            height: 3rem;
            display: block;
            position: relative;
        }

            #bit-bswup .bswup-container circle {
                fill: none;
                stroke: #e0e0e0;
                stroke-width: 0.2rem;
                transform-origin: 50% 50%;
                transform: rotate(-90deg);
            }

                #bit-bswup .bswup-container circle:last-child {
                    stroke: #1b6ec2;
                    transition: stroke-dasharray 0.05s ease-in-out;
                    stroke-dasharray: calc(3.141 * var(--bit-bswup-percent, 0%) * 0.8), 500%;
                }

        #bit-bswup .bswup-progress-text {
            top: 50%;
            left: 50%;
            font-size: 12px;
            position: absolute;
            text-align: center;
            font-weight: normal;
            transform: translate(-50%, -50%);
        }

            #bit-bswup .bswup-progress-text::after {
                content: var(--bit-bswup-percent-text, "");
            }
</style>

<div>
    @* Boilerplate.Client.Core/Scripts/bswup.ts would apply latest version when user is not activly using the app,
    so the `AutoReload` can be set to false to avoid reload during active use. *@
    <BswupProgress AppContainer="#app-container" HideApp="false" AutoReload="false" ShowLogs="false" ShowAssets="false" AutoHide="true">
        <div class="bswup-progress-text" />
        <svg class="bswup-container">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
    </BswupProgress>
</div>